<template>
  <PageContainer>
    <view class="container">
      <InvitationDetailCount
        :browse-num="countData?.browseNum"
        :browse-people-num="countData?.browsePeopleNum"
        :register-num="countData?.registerNum"
        title="我带来的"
      >
        <template #list>
          <Paglist
            v-model="dataList"
            :is-init-api="false"
            :parame="parame"
            @register="register"
            :scroll-top-bottom="260"
            :is-show-loadmore="dataList.length >= 1"
          >
            <RankList :columns="columns" :rows="dataList">
              <template #row="{ row, column, index }">
                <template v-if="column.key === 'serialNumber'">
                  <view class="serial-number">{{ index + 1 }}</view>
                </template>
                <template v-else-if="column.key === 'userName'">
                  <view class="img-name-box">
                    <TImage
                      :src="row['avatar']"
                      errorImgType="person"
                      width="56rpx"
                      height="56rpx"
                      border-radius="50%"
                    />
                    <view class="name-last-time-box">
                      <view class="name-box">
                        <text class="name ov-1">{{ row[column.key] }}</text>
                        <view v-if="row['memberLevelName']" class="member-level-name">
                          {{ row['memberLevelName'] }}
                        </view>
                      </view>
                      <text class="last-time">
                        {{ dateUtil().to(dateUtil(row['lastTime'])) }}浏览
                      </text>
                    </view>
                  </view>
                </template>
                <template v-else>
                  <view class="num-text">
                    {{ row[column.key] }}
                  </view>
                </template>
              </template>
            </RankList>
          </Paglist>
        </template>
      </InvitationDetailCount>
      <TButtonGroup>
        <TButton
          class="gutter-btn"
          type="none"
          text="邀约更多好友参加"
          :customStyle="{
            borderRadius: '44rpx',
            color: '#FFF',
            background: '#EA5E0E',
          }"
          @click="showSharePopup = true"
        />
      </TButtonGroup>
      <CustomShare
        v-if="getActivityShareCache"
        v-model:visible="showSharePopup"
        @register="handleCustomShareRegister"
      />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  import TImage from '@/components/TImage/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import InvitationDetailCount from '../../components/InvitationDetailCount.vue';
  import { provide, reactive, ref } from 'vue';
  import { onLoad } from '@/router';
  import { activityInviteDetailList, detailCount } from '@/api/activity';
  import type {
    ActivityInviteDetailListQuery,
    DetailCount,
    InviteDetailList,
  } from '@/api/activity/types';
  import RankList, { type Column } from '../../components/InvitationRankingMain/RankList/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import Paglist from '@/components/Paglist/index.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { onPageScroll, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
  import CustomShare from '@/components/CustomShare/index.vue';
  import { useCustomShare } from '@/components/CustomShare/hooks/useCustomShare';
  import { useActivityStore } from '@/store/modules/activity';
  import { dateUtil } from '@/utils/dateUtil';
  import { createMiniCode } from '@/utils/dynamicConfig';
  import { getActivityPosterData } from '../../utils';

  const { getActivityShareCache } = useActivityStore();

  const [
    customShareRegister,
    {
      setWxShareOptions,
      setShareLogId,
      setPosterDrawData,
      setShareTimelineContent,
      setInternalLinkOptions,
    },
  ] = useCustomShare({
    buttons: {
      share: true,
      poster: true,
      copyLink: true,
      insertOffiaccount: true,
      offiaccount: true,
    },
    disableds: {
      shortLink: true,
    },
  });

  const activityId = ref<number>();
  onLoad<'activityDetailInvitationRankingDetail'>(async (op) => {
    activityId.value = op.activityId;
    parame.activityId = op.activityId;
    queryCount();
    refresh();
  });

  const countData = ref<DetailCount>();
  const queryCount = async () => {
    countData.value = await detailCount(activityId.value!);
  };

  const columns: Column[] = [
    { title: '序号', key: 'serialNumber', width: '80rpx', align: 'center' },
    { title: '我带来的人', key: 'userName', width: 'auto', align: 'left' },
    { title: '浏览次数', key: 'browseNum', width: '120rpx', align: 'center' },
    { title: '报名人数', key: 'registerNum', width: '120rpx', align: 'center' },
  ];

  const dataList = ref<InviteDetailList[]>([]);

  const parame = reactive<ActivityInviteDetailListQuery>({
    activityId: 0,
    current: 1,
    size: 10,
  });

  provide('api', async (obj: ActivityInviteDetailListQuery) => {
    const res = await activityInviteDetailList(obj);
    return res;
  });
  const [register, { refresh }] = useConList();

  const showSharePopup = ref(false);
  async function handleCustomShareRegister(e: any) {
    customShareRegister(e);
    if (getActivityShareCache) {
      const { wxShareOptions, shareLogId, shareTimelineContent, activeityData } =
        getActivityShareCache;
      setInternalLinkOptions({
        name: 'activityDetails',
        options: { id: activeityData.id },
      });
      setWxShareOptions(wxShareOptions);
      setShareLogId(shareLogId);
      setShareTimelineContent(shareTimelineContent);
      const codeImg = await createMiniCode({ shareLogId });
      const posterData = getActivityPosterData(activeityData, codeImg);
      await setPosterDrawData(posterData);
    }
  }

  onPageScroll(() => {});
  onShareAppMessage(() => ({}));
  onShareTimeline(() => ({}));
</script>

<style lang="scss" scoped>
  .container {
    padding-bottom: 128rpx;
    background: #fff;
    .img-name-box {
      display: flex;
      align-items: center;
      position: relative;
      gap: 16rpx;
      .name-last-time-box {
        display: flex;
        flex-direction: column;
        gap: 8rpx;

        .name-box {
          display: flex;
          align-items: center;
          gap: 8rpx;
          .name {
            color: #333;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 40rpx;
          }
          .member-level-name {
            display: flex;
            padding: 4rpx 8rpx;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 2px;
            background: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
            color: #ea5e0e;
            font-size: 16rpx;
            font-weight: 400;
            line-height: 20rpx;
          }
        }
        .last-time {
          color: #969799;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
        }
      }
    }
    .num-text {
      color: #333;
      font-size: 28rpx;
      font-weight: 700;
      line-height: 40rpx;
    }
    .serial-number {
      color: #ccccc8;
      font-size: 24rpx;
      font-weight: 700;
      line-height: 32rpx;
    }
  }
</style>
